<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Html Api</title>
  <!--
  html5 Geolocation API 用于获得用户的地理位置
  例子解释：

  检测是否支持地理定位
  如果支持，则运行 getCurrentPosition() 方法。如果不支持，则向用户显示一段消息。
  如果getCurrentPosition()运行成功，则向参数showPosition中规定的函数返回一个coordinates对象
  showPosition() 函数获得并显示经度和纬度

  拖拽功能 将某个图片拖拽到矩形中  拖放 Drag和Drop 是很常见的特性 它指的是您抓取某物并拖入不同的位置
  拖放是html5 标准的组成部分 任何元素都是可拖放的

  draggable="true" 把一个元素设置为可拖放
  ondragstart 属性调用了一个 drag(event) 函数，规定拖动什么数据。
  dataTransfer.setData() 方法设置被拖动数据的数据类型和值：
  ev.dataTransfer.setData("text", ev.target.id);

  拖到何处 - ondragover
  ondragover 事件规定被拖动的数据能够被放置到何处。
  默认地，数据/元素无法被放置到其他元素中。为了实现拖放，我们必须阻止元素的这种默认的处理方式。
  这个任务由 ondragover 事件的 event.preventDefault() 方法完成：

  进行放置 - ondrop
  当放开被拖数据时 会发生drop事件
  代码解释：
  调用 preventDefault() 来阻止数据的浏览器默认处理方式（drop 事件的默认行为是以链接形式打开）
  通过 dataTransfer.getData() 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据
  被拖数据是被拖元素的 id ("drag1")
  把被拖元素追加到放置元素中

  本地存储 web 应该能够在用户浏览器中对数据进行本地的存储 在 HTML5 之前，应用程序数据只能存储在 cookie 中，包括每个服务器请求。本地存储则更安全，并且可在不影响网站性能的前提下将大量数据存储于本地。
与 cookie 不同，存储限制要大得多（至少5MB），并且信息不会被传输到服务器。本地存储经由起源地（origin）（经由域和协议）。所有页面，从起源地，能够存储和访问相同的数据。

  HTML5 引入了应用程序缓存（Application Cache），这意味着可对 web 应用进行缓存，并可在没有因特网连接时进行访问。
  应用程序缓存为应用带来三个优势：

  离线浏览 - 用户可在应用离线时使用它们
  速度 - 已缓存资源加载得更快
  减少服务器负载 - 浏览器将只从服务器下载更新过或更改过的资源


  -->
  <style type="text/css">
    #div1, #div2 {
      float: left;
      width: 198px;
      height: 66px;
      margin: 10px;
      padding: 10px;
      border: 1px solid #aaaaaa;
    }
  </style>
  <script type="text/javascript">
    function allowDrop(ev) {
      ev.preventDefault();
    }

    function drag(ev) {
      ev.dataTransfer.setData("Text", ev.target.id);
    }

    function drop(ev) {
      ev.preventDefault();
      const data = ev.dataTransfer.getData("Text");
      ev.target.appendChild(document.getElementById(data));
    }

    const x = document.getElementById("demo");

    function getLocation() {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
      } else {
        x.innerHTML = "Geolocation is not supported by this browser.";
      }
    }

    function showPosition(position) {
      x.innerHTML = "Latitude: " + position.coords.latitude + "<br/>Longitude: " + position.coords.latitude;
    }

    function showError(error) {
      error.UNKNOWN_ERROR = undefined;
      switch (error.code) {
        // 用户不允许地理定位
        case error.PERMISSION_DENIED:
          x.innerHTML = "User denied the request for Geolocation."
          break;
        // 无法获取当前位置
        case error.POSITION_UNAVAILABLE:
          x.innerHTML = "Location information is unavailable."
          break;
        // 操作超时
        case error.TIMEOUT:
          x.innerHTML = "The request to get user location timed out."
          break;
        // 其他错误
        case error.UNKNOWN_ERROR:
          x.innerHTML = "An unknown error occurred."
          break;
      }
    }

    //   在地图中显示结果 需要访问可使用经纬度的地图服务 谷歌地图或百度地图 使用返回的经纬度数据在谷歌地图中显示位置 使用静态图像
    function showPosition1(position) {
      const nation = position.coords.latitude + "," + position.coords.latitude;
      const img_url = "https://maps.googleapis.com/maps/api/staticmap?center="
        + nation + "&zoom=14&size=400x300&sensor=false";
      document.getElementById("mapHolder").innerHTML = "<img src='" + img_url + "' alt=''/>";
    }

  </script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
  <img id="drag1" src="/img/eg_dragdrop_w3school.gif" draggable="true" ondragstart="drag(event)" alt=""/>
</div>
<div id="div2" ondrag="drop(event)" ondragover="allowDrop(event)"></div>
</body>
</html>
